<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamic Cycle p-V Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Coordinates
        const origin = { x: 80, y: 450 };
        const p2_y = 100;
        const p1_y = 350;
        const v1_x = 150;
        const v2_x = 420;

        const A = { x: v1_x, y: p2_y };
        const B = { x: v1_x, y: p1_y };
        const C = { x: v2_x, y: p1_y };
        const D = { x: v2_x, y: p2_y };

        // --- Main Drawing ---

        // Draw axes
        ctx.font = 'italic 20px Times New Roman';
        // Y-axis (p)
        ctx.beginPath();
        ctx.moveTo(origin.x, origin.y + 10);
        ctx.lineTo(origin.x, 50);
        ctx.stroke();
        // Arrow head for y-axis
        ctx.beginPath();
        ctx.moveTo(origin.x - 5, 60);
        ctx.lineTo(origin.x, 50);
        ctx.lineTo(origin.x + 5, 60);
        ctx.stroke();
        ctx.fillText('p', origin.x - 30, 60);

        // X-axis (V)
        ctx.beginPath();
        ctx.moveTo(origin.x - 10, origin.y);
        ctx.lineTo(500, origin.y);
        ctx.stroke();
        // Arrow head for x-axis
        ctx.beginPath();
        ctx.moveTo(490, origin.y - 5);
        ctx.lineTo(500, origin.y);
        ctx.lineTo(490, origin.y + 5);
        ctx.stroke();
        ctx.fillText('V', 510, origin.y);

        // Label Origin
        ctx.fillText('O', origin.x - 20, origin.y + 20);

        // Draw the rectangle ADCB
        ctx.beginPath();
        ctx.moveTo(A.x, A.y);
        ctx.lineTo(D.x, D.y);
        ctx.lineTo(C.x, C.y);
        ctx.lineTo(B.x, B.y);
        ctx.closePath();
        ctx.stroke();

        // Draw the adiabatic curve AC
        ctx.beginPath();
        ctx.moveTo(A.x, A.y);
        // A control point that makes the curve steeper at A and flatter at C
        const cp = { x: 170, y: 330 }; 
        ctx.quadraticCurveTo(cp.x, cp.y, C.x, C.y);
        ctx.stroke();

        // Draw dashed lines
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1;

        // Dashed line for p2
        ctx.beginPath();
        ctx.moveTo(origin.x, p2_y);
        ctx.lineTo(A.x, A.y);
        ctx.stroke();

        // Dashed line for p1
        ctx.beginPath();
        ctx.moveTo(origin.x, p1_y);
        ctx.lineTo(B.x, B.y);
        ctx.stroke();

        // Dashed line for V1
        ctx.beginPath();
        ctx.moveTo(v1_x, origin.y);
        ctx.lineTo(B.x, B.y);
        ctx.stroke();

        // Dashed line for V2
        ctx.beginPath();
        ctx.moveTo(v2_x, origin.y);
        ctx.lineTo(C.x, C.y);
        ctx.stroke();
        ctx.restore();

        // --- Labels ---
        
        // Axis value labels with subscripts
        // p2
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('p', origin.x - 30, p2_y);
        ctx.font = '15px Times New Roman';
        ctx.fillText('2', origin.x - 20, p2_y + 8);
        
        // p1
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('p', origin.x - 30, p1_y);
        ctx.font = '15px Times New Roman';
        ctx.fillText('1', origin.x - 20, p1_y + 8);

        // V1
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('V', v1_x, origin.y + 25);
        ctx.font = '15px Times New Roman';
        ctx.fillText('1', v1_x + 8, origin.y + 30);

        // V2
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('V', v2_x, origin.y + 25);
        ctx.font = '15px Times New Roman';
        ctx.fillText('2', v2_x + 8, origin.y + 30);

        // Point labels
        ctx.font = '20px Times New Roman';
        ctx.fillText('A', A.x + 15, A.y - 10);
        ctx.fillText('B', B.x + 15, B.y + 15);
        ctx.fillText('C', C.x + 15, C.y + 15);
        ctx.fillText('D', D.x + 15, D.y - 10);
        
        // --- Cycle Arrows ---
        
        function drawCircularArrow(ctx, cx, cy, r, startAngle, endAngle) {
            ctx.save();
            ctx.lineWidth = 1.5;
            
            // Draw the arc
            ctx.beginPath();
            ctx.arc(cx, cy, r, startAngle, endAngle, true); // Clockwise arc
            ctx.stroke();
        
            // Draw the arrowhead
            const angle = endAngle;
            const x = cx + r * Math.cos(angle);
            const y = cy + r * Math.sin(angle);
            const tangent = angle - Math.PI / 2; // Tangent for clockwise arc
            const arrowAngle = Math.PI / 6;
            const arrowSize = 8;
        
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x - arrowSize * Math.cos(tangent - arrowAngle), y - arrowSize * Math.sin(tangent - arrowAngle));
            ctx.moveTo(x, y);
            ctx.lineTo(x - arrowSize * Math.cos(tangent + arrowAngle), y - arrowSize * Math.sin(tangent + arrowAngle));
            ctx.stroke();
        
            ctx.restore();
        }

        // Upper arrow (ADCA)
        drawCircularArrow(ctx, 285, 180, 40, 1.1 * Math.PI, 0.6 * Math.PI);
        
        // Lower arrow (ACBA)
        drawCircularArrow(ctx, 285, 290, 40, 0.1 * Math.PI, 1.6 * Math.PI);

    </script>
</body>
</html>